.rotate-area {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 4rem;
    height: 4rem;
    border: 3% solid rgba(244, 243, 242, .5);
    border-radius: 50%;
    text-align: center;
    position: fixed;
    bottom: .5rem;
    left: 1rem;
    transition: all ease .5s;
    z-index: 10;
}
.rotate-area.show {
    bottom: 6.5rem;
    transition: all ease .5s;
}
.rotate-area.big {
    left: 4rem;
    bottom: 33rem;
    width: 30rem;
    height: 30rem;
    transition: all ease .5s;
    z-index: 25;
    opacity: 1;
}
.rotate-area.big.fade-out {
    opacity: 0;
    transition: all ease .5s;
    z-index: 10
}
.round-img {
    position: absolute;
    width: 67.8%;
    height: 67.8%;
    border-radius: 50%;
    top: 16%;
}

.disc-cover {
    position: absolute;
    width: 104%;
    height: 104%;
    top: -1.8%;
    z-index: 20;
}

.rotate-area.rotate {
    animation: wheel-rotate 10s linear infinite;
}

.suspended {
    animation-play-state: paused !important;
}

@keyframes wheel-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
